<template>
  <Modal v-model="showPsdModal" draggable title="修改密码" width="650">
    <Form ref="formModel" :rules="ruleValidate" :model="bloc.form" :label-width="100" label-position="right">
      <FormItem label="原密码:" prop="oldPwd" required v-if="idx === 0">
        <Input type="password" placeholder="请填写旧密码" autocomplete="new-password" v-model="bloc.form.oldPwd" style="width: 400px;height: 40px;"/>
      </FormItem>
      <FormItem label="新密码:" prop="password" required>
        <Input type="password" placeholder="请填写新密码" autocomplete="new-password" v-model="bloc.form.password" style="width: 400px;height: 40px;"/>
      </FormItem>
      <FormItem label="确认密码:" prop="repeatPassword" required>
        <Input type="password" placeholder="请填写确认密码" autocomplete="new-password" v-model="bloc.form.repeatPassword"
               style="width: 400px;height: 40px;"/>
      </FormItem>
    </Form>
    <div slot="footer">
      <Button style="width: 56px;height: 32px;" @click="modalCancel(null)">取消</Button>
      <Button type="primary" style="margin-left: 30px;width: 56px;height: 32px;" :loading="btnload.loading"
              @click="modalOk">确定
      </Button>
    </div>
    <div slot="close">
      <Icon color="#999" size="31" @click="modalCancel(null)" type="ios-close" />
    </div>
  </Modal>
</template>

<script lang="ts">
    import {Component, Vue, Prop} from 'vue-property-decorator';
    import {Loading} from '@/base/Loading';
    import {ChangeAgentPwdBloc} from '@/component/bloc/ChangeAgentPwd';
    import {getValidatePsd} from '@/base/util/Validate';
    import {isEmpty} from '@/base/util/Strings';

    @Component
    export default class FormRoleModal extends Vue {
        @Prop({type: Boolean})
        readonly showPsdModal!: boolean;
        @Prop({type: Number})
        readonly idx!: number;

        bloc: ChangeAgentPwdBloc = new ChangeAgentPwdBloc();
        btnload = new Loading();
        validateRepeatPassword = (rule: any, value: string, callback: any) => {
            isEmpty(this.bloc.form.repeatPassword) ||
            this.bloc.form.password !== this.bloc.form.repeatPassword
                ? callback(new Error('前后密码输入不一致。')) : callback();
        };
        validatePsd = (rule: any, value: string, callback: any) => {
            if (isEmpty(value)) return callback(new Error('密码不能为空'));
            if (!getValidatePsd(value)) return callback(new Error('密码由字母、数字、下划线组成且长度为6-20'));
            return callback();
        };

        ruleValidate = {
            oldPwd: [
                {required: true, message: '原密码不能为空', trigger: 'blur'}
            ],
            password: [
                {required: true, validator: this.validatePsd, trigger: 'blur'}
            ],
            repeatPassword: [
                {validator: this.validateRepeatPassword, trigger: 'change'}
            ]
        };

        save() {
           return this.bloc.save(this.idx);
        }
        modalOk() {
            const formRef: any = this.$refs['formModel'];
            formRef.validate((valid) => {
                if (valid) {
                    this.btnload.loading = true;
                    this.save().then(res => {
                        this.btnload.loading = false;
                        this.$Message.success('修改密码成功');
                        this.modalCancel(true);
                    }).catch(err => {
                        this.btnload.loading = false;
                        this.$Message.error(err.message || '修改密码失败');
                        console.log('出错啦::::', err);
                    });
                }
            });
        }

        modalCancel(val) {
            const formRef: any = this.$refs['formModel'];
            formRef.resetFields();
            val ? this.$emit('savePwdModal') : this.$emit('closeModal');
        }

    }
</script>

<style lang="less" scoped>
</style>
